<template>
    <el-card class="form-card" shadow="hover">
        <el-form class="card" style=" width: 80%; padding: 40px 20px;" ref="userStore.userInfo" :rules="rules" :model="userStore.userInfo" label-width="80px">
            <el-form-item label="头像" prop="avatar">
                <div style="display: flex; justify-content: center; width: 100%;">
                    <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8080/files/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="avatar" :src="avatar" class="avatar" />
                        <img v-else src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>                    
                </div>

            </el-form-item>
            <el-form-item label="账号" prop="username">
                <el-input v-model="userStore.userInfo.username" autocomplete="off" placeholder="请输入账号" />
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="userStore.userInfo.name" autocomplete="off" placeholder="请输入名称" />
            </el-form-item>
            <div v-if="userStore.userInfo?.role=='EMP'">
                <el-form-item label="性别">
                    <el-radio-group v-model="userStore.userInfo.sex">
                        <el-radio value="男">男</el-radio>
                        <el-radio value="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="工号" prop="no">
                    <el-input disabled v-model="userStore.userInfo.no" autocomplete="off" placeholder="请输入工号" />
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input-number v-model="userStore.userInfo.age" :min="18" autocomplete="off" placeholder="请输入年龄" style="width: 180px;" />
                </el-form-item>
                <el-form-item label="主要描述" prop="description">
                    <el-input v-model="userStore.userInfo.description" type="textarea" autocomplete="off" placeholder="请输入描述" />
                </el-form-item>
            </div>
            <div style="text-align: center;">
                <el-button @click="update" size="large" type="primary">更新个人信息</el-button>
            </div>
        </el-form>        
    </el-card>


</template>
<script setup>
import { onMounted, ref } from 'vue';
import { useUserStore } from '@/store/userStore';
import { useEmployeeStore } from '@/store/employeeStore';
import { ElMessage } from 'element-plus';
import { useAdminStore } from '@/store/adminStore';
import { updateAdminApi } from '@/api/admin';
import { updateEmployeeApi } from '@/api/employee';

const userStore = useUserStore()

const avatar = ref('')
onMounted(() => avatar.value = userStore.userInfo.avatar)

const handleAvatarSuccess = (res) => {
    console.log(res.data);
    avatar.value = res.data;
}
const beforeAvatarUpload = (file) => {
  const isImage = file.type.startsWith('image/');
  const isLt2M = file.size / 1024 / 1024 < 5; // 限制文件大小为 2MB

  if (!isImage) {
    ElMessage.error('只能上传图片文件');
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB');
  }

  return isImage && isLt2M;
};
const update = async () => {
    if(avatar.value) userStore.userInfo.avatar = avatar.value
    if(userStore.userInfo?.role == 'EMP') {
        const res = await updateEmployeeApi(userStore.userInfo);
        if(res.code == '200') {
            ElMessage.success("更新成功");
        } else{
            ElMessage.error(res.msg);
        }
    } else {
        const res = await updateAdminApi(userStore.userInfo);
        if(res.code == '200') {
            ElMessage.success("更新成功");
        } else{
            ElMessage.error(res.msg);
        }
    }
}
const form = ref({})
const formRef = ref()
const rules = {
  username: [
    { required: true, message: '账号不能为空', trigger: 'blur' },
    { min: 3, max: 10, message: '账号长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '名称不能为空', trigger: 'blur' }
  ],
  no: [
    { required: true, message: '工号不能为空', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '年龄不能为空', trigger: 'blur' }
  ]
};
</script>
<style scoped>
.el-form-item {
  margin-bottom: 24px;
}
.el-input,
.el-textarea,
.el-input-number {
  width: 100%;
}

.el-radio-group {
  display: flex;
  gap: 20px;
}

.el-button {
  margin-top: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 20%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
</style>